<template>
  <el-drawer v-model="isDrawerVisible" title="商家详情" :with-header="true" width="80%">
    <div class="detail-container">
      <el-descriptions direction="vertical" :column="3" size="large" border>
        <el-descriptions-item label="店铺ID">{{shop.id}}</el-descriptions-item>
        <el-descriptions-item label="店名">{{shop.shopname}}</el-descriptions-item>
        <el-descriptions-item label="密码">{{shop.pwd}}</el-descriptions-item>
        <el-descriptions-item label="审核状态">{{shop.checked== 0 ? "待审核" : "审核通过"}}</el-descriptions-item>
        <el-descriptions-item label="评分">{{shop.score}}</el-descriptions-item>
        <el-descriptions-item label="电话">{{shop.phone}}</el-descriptions-item>
        <el-descriptions-item label="地址">{{shop.address}}</el-descriptions-item>
        <el-descriptions-item label="营业状态">{{shop.state== 1 ? "营业中" : "暂停营业"}}</el-descriptions-item>
        <el-descriptions-item label="收入">{{shop.income}}</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 控制抽屉的显示
const isDrawerVisible = ref(false);

const shop = ref({
  id: '',
  shopname: '',
  pwd: '',
  checked: '',
  address: '',
  phone: '',
  state: '',
  score: '',
  income: '',
});

// 接收父组件传递过来的 对象 数据
const handleDetailData = (obj) => {
  isDrawerVisible.value = true;
  shop.value = obj;
}

// 将 handleDetailData 暴露给父组件
defineExpose({
  handleDetailData
})
</script>

<style scoped>
.detail-container {
  padding: 20px;
}
</style>